import { Button, Card, Input, Form, InputNumber, Radio,DatePicker,Cascader,Checkbox} from 'antd';
import { connect } from 'umi';
import React, { useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import moment from 'moment';

const FormItem = Form.Item;
const { TextArea } = Input;

const BasicForm = props => {
  const { submitting,dispatch } = props;
  const [form] = Form.useForm();
  const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 7,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 12,
      },
      md: {
        span: 10,
      },
    },
  };
  const submitFormLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 10,
        offset: 7,
      },
    },
  };

  const onFinish = values => {
    const { dispatch } = props;
    values.memberId=props.match.params.id
    if(values.bodyExaminationTime){
      values.bodyExaminationTime=moment(values.bodyExaminationTime).format('YYYY-MM-DD')
    }
    console.log('values===>',values)
    dispatch({
      type: 'cubeVip/addBody',
      payload: values,
    });
  };

  return (
    <PageHeaderWrapper title="添加体测信息">
      <Card bordered={false}>
        <Form
          style={{
            marginTop: 8,
          }}
          form={form}
          name="basic"
          onFinish={onFinish}
        >
          <FormItem
            {...formItemLayout}
            label="体测时间"
            name="bodyExaminationTime"
          >
            <DatePicker style={{ width: '100%' }} format="YYYY-MM-DD" placeholder="选择时间"/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="身高"
            name="height"
          >
            <InputNumber
              min={0}
              style={{ width: '100%' }}
              formatter={value => `${value}cm`}
              parser={value => value.replace('cm', '')}
            />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="体重"
            name="weight"
          >
             <InputNumber
              min={0}
              style={{ width: '100%' }}
              formatter={value => `${value}kg`}
              parser={value => value.replace('kg', '')}
            />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="体脂率"
            name="bodyFatRate"
          >
             <InputNumber
              min={0}
              style={{ width: '100%' }}
              formatter={value => `${value}%`}
              parser={value => value.replace('%', '')}
            />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="水分率"
            name="moistureDatio"
          >
               <InputNumber
              min={0}
              style={{ width: '100%' }}
              formatter={value => `${value}%`}
              parser={value => value.replace('%', '')}
            />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="肌肉率"
            name="muscleRate"
          >
              <InputNumber
              min={0}
              style={{ width: '100%' }}
              formatter={value => `${value}%`}
              parser={value => value.replace('%', '')}
            />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="体型判断"
            name="bodyShapeJudgment"
          >
            <Input  placeholder="请输入" />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="代谢年龄"
            name="metabolicAge"
          >
              <InputNumber
              placeholder="请输入"
              min={0}
              style={{ width: '100%' }}
              style={{ width: '100%' }}
            />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="骨含量"
            name="boneContent"
          >
             <InputNumber
              min={0}
              style={{ width: '100%' }}
              formatter={value => `${value}%`}
              parser={value => value.replace('%', '')}
            />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="内脂含量"
            name="lactoneContent"
          >
              <InputNumber
              min={0}
              style={{ width: '100%' }}
              formatter={value => `${value}%`}
              parser={value => value.replace('%', '')}
            />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="体测对比"
            name="somatometricComparison"
          >
               <Input  placeholder="请输入" />
          </FormItem>
          <FormItem
            {...submitFormLayout}
            style={{
              marginTop: 32,
            }}
          >
            <Button type="primary" htmlType="submit" loading={submitting}>
             提交
            </Button>
            <Button
              style={{
                marginLeft: 8,
              }}
              onClick={()=>window.history.back()}
            >
              返回
            </Button>
          </FormItem>
        </Form>
      </Card>
    </PageHeaderWrapper>
  );
};

export default connect(({ loading }) => ({
  submitting: loading.effects['cubeVip/addBody']
}))(BasicForm);
